<template>
  <v-sheet class="transparent ">
    <v-img
      :src="`https://picsum.photos/500/300?image=${2 * 5 + 10}`"
      :lazy-src="`https://picsum.photos/10/6?image=${3 * 5 + 10}`"
      aspect-ratio="1"
      class="grey lighten-2 relative"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template v-slot:placeholder>
        <v-row class="fill-height ma-0" align="center" justify="center">
          <v-progress-circular
            indeterminate
            color="grey lighten-5"
          ></v-progress-circular>
        </v-row>
      </template>
      <!-- 左边的 -->
      <v-sheet>
        <v-btn
          style="left: 4px; top: 4px"
          class="br-4 white--text absolute"
          v-if="defaultLeft"
          color="#F9A825"
        >
          热门标签
        </v-btn>
        <slot
          class="absolute"
          style="left: 4px; top: 4px"
          name="leftTopIcon"
        ></slot>
      </v-sheet>
      <!-- 右边的icon -->
      <v-btn
        icon
        width="20"
        class="absolute"
        height="17"
        style="right: 8px; top: 8px"
      >
        <v-icon
          v-if="showHeart"
          width="20"
          height="17"
          color="#616161"
          class="material-icons absolute"
          >favorite</v-icon
        >
        <slot name="rightTopIcon"></slot>
      </v-btn>
    </v-img>
  </v-sheet>
</template>

<script>
export default {
  props: {
    showHeart: { type: Boolean, default: true },
    defaultLeft: { type: Boolean, default: true },
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {},
}
</script>

<style scoped>
.color {
  color: red;
}
</style>
